
Template7.templates.addressBookUserTemplate = Template7.compile(
    '<ul>' +
    '<li class="item">' +
    '<div class="item-media">' +
    '<img src="{{image}}" alt="" width="44" height="44"></div>' +
    '<div class="item-title">' +
    '<p class="name">{{name}}</p>' +
    '<p class="job">' +
    '<span>{{job}}</span>' +
    '</p>' +
    '</div>' +
    '<div class="item-after"></div>' +
    '</li>' +
    '<li class="item">' +
    '<div class="item-media"></div>' +
    '<div class="item-title">' +
    '<p>' +
    '手机:' +
    '<span>{{phone}}</span>' +
    '</p>' +
    '</div>' +
    '<div class="item-after">' +
    '<a href="#" class="link opt-call" data-phone="{{phone}}"> <i class="icon icon-cellphone"></i>' +
    '</a>' +
    '<span class="split-line"></span>' +
    '<a href="#" class="link opt-sms"  data-smsno="{{phone}}"> <i class="icon icon-SMS"></i>' +
    '</a>' +
    '</div>' +
    '</li>' +
    /*'<li class="item">' +
    '<div class="item-media"></div>' +
    '<div class="item-title">' +
    '<p>' +
    '办公座机:' +
    '<span>{{officephone}}</span>' +
    '</p>' +
    '</div>' +
    '<div class="item-after">' +
    '<a href="#" class="link opt-tele"  data-officephone="{{officephone}}">' +
    '<i class="icon icon-tele"></i>' +
    '</a>' +
    '</div>' +
    '</li>' +
    '<li class="item">' +
    '<div class="item-media"></div>' +
    '<div class="item-title">' +
    '<p>联系地址:</p>' +
    '<p>' +
    '<span>{{address}}</span>' +
    '</p>' +
    '</div>' +
    '<div class="item-after"></div>' +
    '</li>' +*/
    '<li class="item">' +
    '<div class="item-media"></div>' +
    '<div class="item-title">' +
    '<p>邮箱:</p>' +
    '<p><span>{{email}}</span>' +
    '</div>' +
    '<div class="item-after">' +
    '<a href="mailto:{{email}}" class="external link opt-mail">' +
    '<i class="icon icon-mail"></i>' +
    '</a>' +
    '</div>' +
    '</li>' +
    /*'<li class="item">'+
     '<div class="item-media"></div>'+
     '<div class="item-title">'+
     '<p>'+
     '<span>复制联系方式到手机</span>'+
     '</p>'+
     '</div>'+
     '<div class="item-after">'+
     '<a href="#" class="link opt-copy">'+
     '<i class="icon icon-copy"></i>'+
     '</a>'+
     '</div>'+
     '</li>'+*/
    '</ul>');

(function () {
    function loadUserDetails(container, params) {
        var pageCon = container;
        var req = params;

        $$.getJSONP(SERVER_PATH + 'getUserListinfo.do', {num: 0, start: 0, userId: req.id}, function (json) {
            if (json.code == 1) {
                var userinfo = json.results;

                var html = Template7.templates.addressBookUserTemplate(userinfo);
                pageCon.find('.list-block').html(html);

                pageCon.find(".opt-call").on("click", function (e) {
                    var phone = $$(this).data('phone');
                    myApp.confirm("立即打电话吗?", "提示", function () {
                        if (clientType == 1) {
                            document.addEventListener("deviceready", function () {
                                TrunPage.callSystemAbility("tel:" + phone);
                            }, false);
                        } else {
                            TrunPage.callSystemAbility("tel:" + phone);
                        }
                    });
                });

                pageCon.find(".opt-sms").on("click", function (e) {
                    var smsno = $$(this).data('smsno');
                    myApp.confirm('立即发送短信吗?', "提示", function () {
                        if (clientType == 1) {
                            document.addEventListener("deviceready", function () {
                                TrunPage.callSystemAbility("sms:" + smsno);
                            }, false);
                        } else {
                            TrunPage.callSystemAbility("sms:" + smsno);
                        }
                    });
                });

                pageCon.find(".opt-tele").on("click", function (e) {
                    var officephone = $$(this).data('officephone');
                    myApp.confirm("立即拨打办公座机吗?", "提示", function () {
                        if (clientType == 1) {
                            document.addEventListener("deviceready", function () {
                                TrunPage.callSystemAbility("tel:" + officephone);
                            }, false);
                        } else {
                            TrunPage.callSystemAbility("tel:" + officephone);
                        }
                    });
                });

                pageCon.find(".opt-copy").on("click", function (e) {
                    myApp.confirm('立即复制电话号码?', "提示");
                });
            }
        });
    }

    function renderAddressBook(obj) {
        var html = '<div class="list-block accordion-list"><ul>';

        if (obj.children.length > 0) {
            $$.each(obj.children, function (index, el) {

                if (el.children.length > 0) {
                    html += '<li class="accordion-item">' +
                        '<a href="#" class="item-content item-link" data-deaprtId="' + el.id + '" data-id="' + el.id + '">' +
                        '<div class="item-inner">' +
                        '<div class="item-title">' + el.label + '</div>' +
                        '</div>' +
                        '</a>' +
                        '<div class="accordion-item-content">';
                    html += renderAddressBook(el);
                    html += '</div></li>';
                } else {
                    html += '<li class="accordion-item deep-item">' +
                        '<a href="#" class="item-content item-link" data-deaprtId="' + el.id + '">' +
                        '<div class="item-inner">' +
                        '<div class="item-title">' + el.label + '</div>' +
                        '</div>' +
                        '</a>' +
                        '<div class="accordion-item-content">';
                    html += '</div></li>';
                }
            });
        }

        html += '</ul></div>'

        return html;
    }

    function renderUserList(container, searchList, deaprtId, link, hasSubDepart) {
        var html = '';

        //myApp.showIndicator();
        $$.getJSONP(SERVER_PATH + 'listuser.do', {"deaprtId": deaprtId}, function (json) {

            if (json.code == 1) {
                link.data('loaded', true);
                var userData = json.results;
                html += '<div class="list-block media-list"><ul>';

                if (userData.length > 0) {
                    $$.each(userData, function (index, el) {
                        var avatarPath = PORTRAIT_PATH + el.id + '.jpg';
                        var li = '<li>' +
                            '<a class="item-content custom-link item-link" href="#" data-href="addressBook-details.html?id=' + el.id + '">' +
                            '<div class="item-media">' +
                            '<img src="' + avatarPath + '" width="44" height="44"></div>' +
                            '<div class="item-inner">' +
                            '<div class="item-title-row">' +
                            '<div class="item-title">' + el.firstName + '</div>' +
                            '</div>' +
                            '<div class="item-subtitle">' + (el.jobInfo ? el.jobInfo : '') + '</div>' +
                            '</div>' +
                            '<div class="item-after"><i class="icon icon-detail"></i></div>' +
                            '</a>' +
                            '</li>';

                        html += li;
                        searchList.find('ul').append(li);
                    });
                } else if (hasSubDepart) {
                    html += '';
                } else {
                    html += '<li>' +
                        '<div class="item-content">' +
                        '<div class="item-inner">' +
                        '<div class="item-subtitle">暂无成员！</div>' +
                        '</div>' +
                        '</div>' +
                        '</li>';
                }

                html += '</ul></div>';


                var htmlEl = $$(html),
                    linkItem = container.find('.item-link[data-deaprtId="' + deaprtId + '"]');
                linkItem.data('content', htmlEl);
                if (!myApp.padApp) {
                    linkItem.next('.accordion-item-content').prepend(htmlEl);
                }
                //myApp.hideIndicator();
            }
        });
    }

    //通讯录页面
    myApp.onPageInit("addressBook", function (page) {
        var pageCon = $$(page.container);

        pageCon.find('.list-block-search').hide();
        var mySearchbar = myApp.searchbar(pageCon.find('.searchbar'), {
            searchList: '.list-block-search',
            searchIn: '.item-title, .item-subtitle',
            onSearch: function (s) {
                setTimeout(function () {
                    if (s.query.length === 0) {
                        pageCon.find('.list-block-search').hide();
                        pageCon.find('.accordion-list').show();
                    } else {
                        pageCon.find('.list-block-search').show();
                        pageCon.find('.accordion-list').hide();
                    }
                }, 0);
            }
        });

        pageCon.on('click', '.custom-link', function () {
            var href = $$(this).attr('data-href');
            page.view.loadPage(href);
        });

        $$.getJSONP(SERVER_PATH + 'listdepart.do', null, function (json) {
            if (json.code == 1) {
                var addressBookData = json.results[0];
                var html = '<div class="list-block accordion-list"><ul>' +
                    '<li class="accordion-item">' +
                    '<a href="#" class="item-content item-link" data-deaprtId="' + addressBookData.id + '" data-id="' + addressBookData.id + '">' +
                    '<div class="item-inner">' +
                    '<div class="item-title">' + addressBookData.label + '</div>' +
                    '</div>' +
                    '</a>' +
                    '<div class="accordion-item-content">';

                html += renderAddressBook(addressBookData);
                html += '</div></li>';
                html += '</ul></div>';

                pageCon.find(".addressBook").prepend(html);
                pageCon.on("click loaddata", ".item-link", function (e) {
                    var link = $$(this),
                        deaprtId = link.data("deaprtId"),
                        hasSubDepart = $$(this).parent().find('.accordion-list').length > 0;

                    if (link.data('loaded')) {
                        return;
                    }

                    renderUserList(pageCon, mySearchbar.searchList, deaprtId, link, hasSubDepart);
                });
                //pageCon.find(".item-link").trigger('loaddata');
            }
        });

    });

    //通讯录-联系人详情页
    myApp.onPageInit("addressBook-details", function (page) {
        console.log("addressBook-details init")
        var pageCon = $$(page.container);
        var req = page.query;

        loadUserDetails(pageCon, req);
    });


    myApp.onPageInit("addressBook-pad", function (page) {
        var pageCon = $$(page.container);
        var subpages = pageCon.find('.subpage-content');

        pageCon.find('.list-block-search').hide();
        var mySearchbar = myApp.searchbar(pageCon.find('.searchbar'), {
            searchList: '.list-block-search',
            searchIn: '.item-title, .item-subtitle',
            onSearch: function (s) {
                setTimeout(function () {
                    if (s.query.length === 0) {
                        pageCon.find('.list-block-search').hide();
                        pageCon.find('.accordion-list').show();
                        subpages.eq(0).css('width', '30%');
                        subpages.eq(1).show();
                        subpages.eq(2).css('width', '40%');
                    } else {
                        pageCon.find('.list-block-search').show();
                        pageCon.find('.accordion-list').hide();
                        subpages.eq(0).css('width', '40%');
                        subpages.eq(1).hide();
                        subpages.eq(2).css('width', '60%');
                    }
                }, 0);
            }
        });

        pageCon.on('click', '.custom-link', function () {
            var href = $$(this).attr('data-href');
            loadUserDetails(subpages.eq(2), $$.parseUrlQuery(href));
        });
        pageCon.on("click loaddata", ".item-link", function (e) {
            var link = $$(this),
                deaprtId = link.data("deaprtId"),
                hasSubDepart = $$(this).parent().find('.accordion-list').length > 0;

            if (link.data('loaded')) {
                return;
            }

            renderUserList(pageCon, mySearchbar.searchList, deaprtId, link, hasSubDepart);
        });
        pageCon.on("click", ".item-link", function (e) {
            var link = $$(this),
                element = link.data("content");

            if (element) {
                subpages.eq(1).children().remove();
                subpages.eq(1).append(element);
            }
        });

        $$.getJSONP(SERVER_PATH + 'listdepart.do', null, function (json) {
            if (json.code == 1) {
                var addressBookData = json.results[0];
                var html = '<div class="list-block accordion-list"><ul>' +
                    '<li class="accordion-item">' +
                    '<a href="#" class="item-content item-link" data-deaprtId="' + addressBookData.id + '" data-id="' + addressBookData.id + '">' +
                    '<div class="item-inner">' +
                    '<div class="item-title">' + addressBookData.label + '</div>' +
                    '</div>' +
                    '</a>' +
                    '<div class="accordion-item-content">';

                html += renderAddressBook(addressBookData);
                html += '</div></li>';
                html += '</ul></div>';

                subpages.eq(0).append(html);

                pageCon.find(".item-link").trigger('loaddata');
            }
        });

    });
}());